import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import { Component } from 'react';

class App extends Component { 
  constructor(props){
    super(props);
    this.state={
      url:undefined
    }
  }

  render(){
    return (
      <div className="App">
        {/* 暂时不使用
        <header className="App-header">
          
        </header>
        */}
  
        {/* 视频播放的显示部分（video） */}
          {/* some teset */}
  
        <div className="container-fluid">
          <div className="row video-container">
            <video controls disablePictureInPicture
              onContextMenu={(event)=>{
                  event.preventDefault();
                  document.querySelector("input").click();
                  return false;
                }
              }
            ></video>
            <input type="file" className="input-file" onChange={
              ()=>{
                window.URL.revokeObjectURL(this.state.url);
                console.log(this.state.url)
                const newUrl = window.URL.createObjectURL(document.querySelector("input").files[0]);
                  this.setState({
                    url:newUrl
                  })
                  document.querySelector("video").src=newUrl;
                }
              } />
          </div>
          
        </div>
      </div>
       
    );
  }
}

export default App;
